<template>
    <div>
      <div class="header">
        <van-nav-bar title="值得买" left-arrow>
          <template #left>
            <van-icon style="" name="wap-home-o" />
          </template>
          <template #right>
            <van-icon name="search" />
            <van-icon name="cart-o" />
          </template>
        </van-nav-bar>
      </div>

      <!-- 轮播图相关 -->
      <div style="position: relative">
        <!-- 轮播图的背景图 -->
        <div class="bgImg">
          <img class="title" src="http://yanxuan.nosdn.127.net/0b7676e645253f84be662aacfc051922.png" alt="" />
          <img src="http://yanxuan.nosdn.127.net/a93a392fb8006ba26dea38477979b7b4.jpg?imageView" alt="" />
          <span class="slogan">严选好物 用心生活</span>
        </div>

        <!-- 中间轮播图 -->
        <div class="swiper">
          <van-swipe class="my-swipe" :loop="false" :width="90" indicator-color="white">
            <van-swipe-item v-for="(infoList, index) in newNavList" :key="index"> 
              <div class="swiper-item" v-for="info in infoList" :key="info.id">
                <div class="top-item">
                  <img class="img" :src="info.picUrl" alt="加载失败" />
                </div>
                <div class="bottom-item">
                  <div class="title">{{ info.mainTitle }}</div>
                  <div class="test">{{ info.viceTitle }}</div>
                </div>
              </div>
            </van-swipe-item>
            <!-- 小点点相关 -->
            <template #indicator="{ active }">
              <div class="custom-indicator">
                <div class="slider">
                  <div class="content">
                    <div class="slider-item" :class="active === item - 1 ? 'active-item' : ''" v-for="item in 4"
                      :key="item"></div>
                  </div>
                </div>
              </div>
            </template>
          </van-swipe>
        </div>
      </div>
    </div>

    <!-- 分页列表相关 -->
    <div class="pageList">
      <div v-masonry transition-duration="0.3s" class="masonry-container">
        <div>
        <van-list v-masonry-tile class="bag" offset="50" v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">

          <div  class="item" :key="index" v-for="(item, index) in topicList">
            <!-- <p>{{ item }} - {{ index }}</p> -->
            <div class="left">
              <!-- 图片 -->
              <van-image fit="cover" :src="item.picUrl" />
              <div class="title">
                {{ item.title }}
              </div>
              <div class="bottom">
                <div>
                  <img class="image" :src="item.avatar" alt="" />
                  <span class="category">{{ item.nickname }}</span>
                </div>
                <div>
                  <img class="eye" src="https://yanxuan.nosdn.127.net/5097bc5f2e1eb15f2a32b56895db073a.png" />
                  <span class="viewnum">{{ item.readCount }}</span>
                </div>
              </div>
            </div>
          </div>
        </van-list>
        </div>
      </div>
    </div>
  
</template>

<script lang="ts">
import { onMounted } from "vue";
import { defineComponent } from "vue";
export default defineComponent({
  name: "Topic",
});
</script>

<script lang="ts" setup>
import opticApi, { NavData, Topic } from "../../api/optic";
import { computed } from "vue";
import { ref } from "vue";

const swiperList = ref<NavData[]>([]);
const topicList = ref<Topic[]>([]);

const colNum = ref();
const page = ref(1);
const size = ref(1);

const loading = ref(false)
const finished = ref(false)
const num = ref(0)
onMounted(() => {
  getSwiperList();
  getlist(page.value, size.value);
});

// 获取轮播数据的方法
async function getSwiperList() {
  try {
    const res = await opticApi.getData();
    swiperList.value = res.navList;
    colNum.value =
    swiperList.value.length % 2 === 0
        ? swiperList.value.length / 2
        : (swiperList.value.length + 1) / 2;
    return "ok";
  } catch (err) {
    // console.log(err);
  }
}

// 获取瀑布流数据
async function getlist(page: number, size: number) {
  const res = await opticApi.getPageList(page, size);
  // console.log(111,res);
   
  // console.log(res.result[0].topics);  
  topicList.value = topicList.value.concat(...res.result[0].topics) ;
  // return res.result[0].topics;
   num.value = num.value+6;
}

// 处理数组
const newNavList = computed(() => {
  const newArr = [];
  let i = 0;
  for (i = 0; i < swiperList.value.length; i++) {
    if (i < swiperList.value.length / 2) {
      const chunk = [swiperList.value[i], swiperList.value[i + 7]];
      newArr.push(chunk);
    }
  }
  return newArr;
});

// 组件滚动到底部后执行
const onLoad =  () => {
  page.value += 1
   // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        getlist(page.value,1)
        // 加载状态结束
        loading.value = false;
        // 数据全部加载完成
        // if (topicList.value.length = num.value) {
        //   finished.value = true;
        // }
      }, 1000);
}

</script>

<style scoped lang="scss">
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  text-align: center;
  // background-color: #39a9ed;
  margin-top: 0.4rem;
}

.bgImg {
  background-color: #eeeeee;
}

.bgImg .title {
  position: absolute;
  width: 1.3rem;
  height: auto;
  top: 0.8rem;
  left: 0.12rem;
  z-index: 2;
}

.bgImg img {
  width: 100%;
  height: 265px;
}

.bgImg .slogan {
  position: absolute;
  top: 0.9rem;
  left: 1.5rem;
  font-size: 14px;
  color: white;
  font-family: PingFangSC-Regular;
}

// 轮播图相关
.swiper {
  height: 5.4rem;
  background: #fff;
  border-radius: 0.16rem;
  position: absolute;
  top: 1.6rem;
  left: 0.1rem;
  right: 0.1rem;

  .custom-indicator {
    background-color: red;
    margin-top: 30px;
  }

  .swiper-item {
    width: 89px;
    height: 100%;
    margin: auto 1px;
    display: inline-block;

    // overflow: hidden;
    .img {
      width: 1.2rem;
      height: 1.2rem;
      display: block;
      margin: 0.1rem auto;
    }
  }

  .bottom-item {
    .title {
      font-family: PingFang-SC-Bold;
      font-weight: 700;
      font-size: 0.28rem;
      width: 100%;
      height: 0.4rem;
      white-space: nowrap;
      overflow: hidden;
      color: #333;
      text-align: center;
      line-height: 0.4rem;
    }

    .test {
      width: 100%;
      margin-top: 0.08rem;
      font-family: PingFangSC-Regular;
      font-size: 0.2rem;
      color: #999;
      text-align: center;
      height: 0.3rem;
      line-height: 0.3rem;
      white-space: nowrap;
      overflow: hidden;
    }
  }
}

// 小点点相关
.slider {
  height: 0.5rem;
  width: 100%;
  background-color: sliderpink;
  position: absolute;
  bottom: 15px;
  display: flex;
  float: center;

  .content {
    position: absolute;
    left: 38%;
    top: 50%;
    display: flex;

    .slider-item {
      width: 10px;
      height: 1.5px;
      background-color: #d9d9d9;
      margin: auto 2px;
      padding-left: 10px;
    }

    .active-item {
      background-color: #dd1a21;
    }
  }
}

// 分页列表相关
.pageList {
  background-color: #eeeeee;
  width: 100%;
  margin: auto;

  .masonry-container {

    // width: 95%;
    // margin: auto;
    // display: flex;
    // justify-content: space-around;
    .bag {
      width: 100%;
      margin: auto;
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;

      .item {
        width: 170px;
        border: 1px solid #eeeeee;
        background-color: white;
        margin: 5px;
        border-radius: 0.16rem;

        .left {
          .title {
            padding: 0.18rem 0.16rem 0;
            color: #333;
            font-size: 0.28rem;
            line-height: 0.4rem;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            lines: 2;
            overflow: hidden;
            text-overflow: ellipsis;
            font-family: PingFangSC-Regular;
            text-align: left;
          }

          .bottom {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .image {
              width: 0.48rem;
              height: 0.48rem;
              -webkit-box-sizing: border-box;
              box-sizing: border-box;
              border-radius: 0.24rem;
              border: 1px solid #d9d9d9;
              border-radius: 0.16rem;
            }

            .category {
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              font-size: 0.22rem;
              color: #7f7f7f;
              height: 0.48rem;
              line-height: 0.48rem;
              vertical-align: middle;
              margin-left: 0.08rem;
            }

            .eye {
              width: 0.32rem;
              height: 0.32rem;
            }

            .viewnum {
              font-size: 0.24rem;
              color: #7f7f7f;
              max-width: 0.9rem;
              height: 0.32rem;
              line-height: 0.48rem;
              margin-left: 0.02rem;
            }
          }
        }
      }
    }
  }
}
</style>
